import { Card, CardProps } from 'antd'
import { PropsWithChildren, useMemo, useState } from 'react'
import { RouteObject, useLocation, useMatches } from 'react-router-dom'

export default function AigcCard(params: PropsWithChildren<CardProps>) {
  const location = useLocation()
  const matchs = useMatches()
  const pathName = location.pathname
  const index = matchs.findIndex((item) => {
    return item.pathname === pathName
  })
  const [match, setMatch] = useState(matchs[index] as any)

  useMemo(() => {
    setMatch(() => matchs[index])
  }, [location.pathname])

  return (
    <>
      <Card
        {...params}
        title={
          <>
            {match.handle.icon}
            <span>{match.handle.name}</span>
          </>
        }
      >
        {params.children}
      </Card>
    </>
  )
}
